<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人通知</title>
    <link rel="stylesheet" href="/static/css/bulma.min.css" th:href="@{/css/bulma.min.css}">
    <link rel="stylesheet" href="/static/css/community.css" th:href="@{/css/community.css}">
    <link rel="stylesheet" href="/static/css/notice.css" th:href="@{/css/notice.css}">
    <link rel="stylesheet" href="/static/css/notice.css" th:href="@{/css/notice.css}">
    <script type="text/javascript" src="/static/js/jquery-3.7.1.min.js" th:src="@{/js/jquery-3.7.1.min.js}"></script>
    <script type="text/javascript" src="/static/js/awesome.js" th:src="@{/js/awesome.js}"></script>
    <script type="text/javascript" src="/static/js/community.js" th:src="@{/js/community.js}"></script>
    <script type="text/javascript" src="/static/js/notice.js" th:src="@{/js/notice.js}"></script>
</head>
<body>
<!-- 导航栏内容 -->
<div th:replace="~{common/nav::nav(current=1,size=10,keyword='')}"></div>
<!-- 中间部分内容 -->
<section class="section">
    <div class="container is-max-widescreen ">
        <div class="columns is-desktop index-top">
            <div class="column">
                <div class="card index-card-border">
                    <header class="card-header-title article-card-header">
                        <i class="fa-solid fa-message"></i> &nbsp;
                        消息
                    </header>
                    <div class="divider"></div>
                    <div class="card-content">
                        <!-- 通知栏 -->
                        <div class="notification-list">
                            <div th:each="notice:${notification.data}"
                                 th:class="'notification-item '+${notice.status?'read':'unread'}"
                                 class="notification-item unread ">
                                    <span class="notice-container">
                                        <span class="notice-user">
                                            <a href="./" class="person-address" target="_blank"
                                               th:href="${notice.fromAddress}">
                                            <img class="rounded-avatar" th:src="${notice.fromAvatarUrl}"
                                                 src="/static/img/000.jpg" alt="User Avatar">
                                            <span th:text="${notice.fromNickName}">Sloan</span>
                                            </a>
                                        </span>
                                        <span>回复了</span>
                                        <span class="notice-type" th:text="${notice.type==0?'你的文章':'你的评论'}">你的文章/评论</span>
                                        <span th:if="${notice.noDel}" th:attr="onclick='toArticleAndComment(' + ${notice.notificationId} + ', \'' + ${notice.articleUsername} + '\', ' + ${notice.articleId} + ', ' + ${notice.commentId} + ')'"
                                              class="notice-content" th:text="${notice.content}">
                                            这是一个很长的文字测试，如果超过200px宽度就会显示省略号。
                                        </span>
                                        <span th:if="${!notice.noDel}" class="notice-content comment-del-content" th:text="${notice.content}">
                                            已删除评论
                                        </span>
                                    </span>
                                <div class="time-icon">
                                    <span class="notice-time"
                                          th:text="${#temporals.format(notice.createdTime,'yyyy/MM/dd HH:mm')}">2024/12/19</span>
                                    <span th:data-notification-id="${notice.notificationId}"
                                            th:class="'button is-rounded is-small toggle-btn '+${!notice.status?'is-danger is-outlined':''}"
                                            th:text="${notice.status?'标为未读':'标为已读'}"
                                            class="button is-rounded is-link is-inverted is-small toggle-btn">标为已读</span>
                                    <div class="status-icon" th:class="'status-icon '+${notice.status?'read':''}">
                                        <span th:if="${!notice.status}" class="count">1</span>
                                        <i th:if="${notice.status}" class="fas fa-check"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="index-page index-page-item">
                            <nav class="pagination is-centered" role="navigation" aria-label="pagination">
                                <a class="pagination-previous"
                                   th:if="${notification.getHasPrePage()}"
                                   th:href="@{'/notice/list?current='+${notification.getPrePage()}+'&size='+${notification.getSize()}}">上一页</a>
                                <a class="pagination-next"
                                   th:if="${notification.getHasNextPage()}"
                                   th:href="@{'/notice/list?current='+${notification.getNextPage()}+'&size='+${notification.getSize()}}">下一页</a>
                                <ul class="pagination-list">
                                    <li th:each="num:${notification.nums}">
                                        <a class="pagination-link is-current"
                                           th:class="${notification.current.equals(num)?'pagination-link is-current':'pagination-link'}"
                                           th:href="@{'/notice/list?current='+${num}+'&size='+${notification.getSize()}}"
                                           aria-label="Goto page 1" th:text="${num}">1</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 底部部分内容 -->
<div th:replace="~{common/footer::footer}"></div>
</body>
</html>